<template>
  <div class="page-container">
    <el-card class="box-card">
      <template #header>
        <div class="header-content">
          <span class="title">
            <el-icon><Management /></el-icon>
            待服务管理
          </span>
          <div class="search">
            <el-input
                v-model="searchKeyword"
                placeholder="姓名/关键字搜索"
                :prefix-icon="Search"
            />
            <el-button
                type="primary"
                @click="search">
              搜索
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column
            prop="id"
            label="编号"
            width="80"
            align="center"
        />

        <el-table-column
            prop="residentName"
            label="姓名"
            width="120"
            align="center"
        />

        <el-table-column
            prop="idCard"
            label="身份证号"
            width="200"
            align="center"
        />

        <el-table-column
            prop="phone"
            label="手机号"
            width="150"
            align="center"
        />

        <el-table-column
            prop="serviceStatus"
            label="服务状态"
            width="120"
            align="center"
        >
          <template #default="scope">
            <el-tag
                :type="getStatusType(scope.row.serviceStatus)"
                disable-transitions
            >{{ statusType(scope.row.serviceStatus) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="packageName"
            label="服务包"
            align="center"
        />

        <el-table-column
            prop="serviceItem"
            label="服务项目"
            align="center"
        />

        <el-table-column
            prop="applyDate"
            label="申请日期"
            width="150"
            align="center"
        />

        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button
                type="primary"
                link
                size="small"
                @click="handleEdit(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {Management, Search} from "@element-plus/icons-vue";
import {queryByName, queryServiceRecord} from "../api/service.js";
import {useUserStore} from "../store/user.js";

export default {
  name: "serviceRecord",
  components: {
    Search,
    Management,
  },
  data() {
    return {
      searchKeyword: '',
      loading: false,
      tableData: [
        {
          id: 1,
          residentName: '杜甫',
          idCard: '3339871999101012124567',
          phone: '13511112222',
          serviceStatus: 1,
          packageName: '老年服务包',
          serviceItem: '上门访问',
          applyDate: '2022-01-11',
        }
      ],
      // 当前登录用户
      currentUser: null,
    };
  },
  computed: {
    Search() {
      return Search
    },
  },
  methods: {
    statusType(status){
      switch (status) {
          //待审核
        case 1:
          return '待审核';
        case 3:
          return '已完成';
        case 4:
          return '已取消';
        default:
          return '已通过';
      }
    },
    getStatusType(status) {
      switch (status) {
        //待审核
        case 1:
          return 'warning';
        case 3:
          return 'success';
        case 4:
          return 'danger';
        default:
          return 'primary';
      }
    },
    handleEdit(row) {
      this.$router.push(`/home/editServiceInfo/${row.id}`)
    },
    async loadData(){
      this.currentUser = useUserStore().userInfo
      let userId = this.currentUser.id
      console.log(userId)
      let {data:data} = await queryServiceRecord(1,userId)
      // console.log(data)
      this.tableData = data.data
    },
    async search(){
      this.currentUser = useUserStore().userInfo
      let userId = this.currentUser.id
      let {data:data} = await queryServiceRecord(1,userId,this.searchKeyword)
      console.log(data)
      this.tableData = data.data
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.page-container {
  background-color: #f0f2f5;
  padding: 10px;
  min-height: 100vh;
}

.box-card {
  border-radius: 4px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
}

.title .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.search{
  width: 240px;
  display: flex;
}
</style>